<template>
	<view class="section sign-in">
		<view class="section-title">
			<text class="title-text">每日签到</text>
			<text class="sign-in-status" :class="{ 'signed': isSigned }">{{isSigned ? '已签到' : '未签到'}}</text>
		</view>
		<view class="sign-in-content">
			<view class="sign-in-btn" :class="{ 'signed': isSigned }" @click="handleSignIn">
				<text class="btn-text">{{isSigned ? '已签到' : '签到'}}</text>
				<text class="btn-reward">+{{signInReward}}积分</text>
			</view>
			<view class="sign-in-tips">
				<text class="tips-text">连续签到{{continuousDays}}天</text>
				<text class="tips-text">累计获得{{totalPoints}}积分</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import {useData} from "../../../common/useData";

// 签到状态
const isSigned = ref(false)
// 签到奖励
const signInReward = ref(10)
// 连续签到天数
const continuousDays = ref(0)
// 累计积分
const totalPoints = ref(0)

// 获取签到数据
const {modelData:signInData}=useData("/user/signIn/info",{})

// 处理签到
const handleSignIn = () => {
	if(isSigned.value) return
	
	uni.showLoading({
		title: '签到中...'
	})
	
	// 调用签到接口
	uni.request({
		url: '/api/user/signIn',
		method: 'POST',
		success: (res) => {
			if(res.data.code === 200) {
				isSigned.value = true
				continuousDays.value = res.data.data.continuousDays
				totalPoints.value = res.data.data.totalPoints
				
				uni.showToast({
					title: '签到成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: res.data.message || '签到失败',
					icon: 'none'
				})
			}
		},
		fail: () => {
			uni.showToast({
				title: '签到失败',
				icon: 'none'
			})
		},
		complete: () => {
			uni.hideLoading()
		}
	})
}

// 初始化签到数据
if(signInData.value) {
	isSigned.value = signInData.value.isSigned
	continuousDays.value = signInData.value.continuousDays
	totalPoints.value = signInData.value.totalPoints
}
</script>

<style>
.section {
	background-color: #FFFFFF;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	padding-left: 20rpx;
	border-left: 8rpx solid #D02B29;
}

.sign-in-status {
	font-size: 24rpx;
	color: #999;
}

.sign-in-status.signed {
	color: #D02B29;
}

.sign-in-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sign-in-btn {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #FF6B6B, #D02B29);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 20rpx;
	position: relative;
	overflow: hidden;
}

.sign-in-btn.signed {
	background: #F5F5F5;
}

.sign-in-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transform: scale(0.8);
}

.sign-in-btn.signed::after {
	display: none;
}

.btn-text {
	font-size: 36rpx;
	color: #FFFFFF;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.sign-in-btn.signed .btn-text {
	color: #999;
}

.btn-reward {
	font-size: 24rpx;
	color: #FFFFFF;
}

.sign-in-btn.signed .btn-reward {
	color: #999;
}

.sign-in-tips {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.tips-text {
	font-size: 24rpx;
	color: #666;
}
</style> 